<template>
  <el-dialog title="计费规则"
    :close-on-click-modal="false"
    :visible.sync="visible"
    top="200px"
    @close="close"
    width="46%">
    <el-table
      :data="chargingRuleObj.billingIntervals"
      border
      max-height="350"
      style="width: 100%">
      <el-table-column
        label="所属时段">
        <template slot-scope="scope">
          <div>{{scope.row.startTime}}-{{scope.row.endTime}}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop=""
        label="电价类别">
      </el-table-column> -->
      <el-table-column
        prop="amount"
        label="电价(元/度)">
      </el-table-column>
      <el-table-column
        prop="serviceAmount"
        label="服务费(元/度)">
      </el-table-column>
      <el-table-column
        label="合计(元/度)">
        <template slot-scope="scope">
          <div>{{Number(scope.row.amount)+Number(scope.row.serviceAmount)}}</div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'chargingRuleDetail',
    data () {
      return {
        chargingRuleObj: {},
        visible: false,
        chartLine: null
      }
    },
    mounted () {
      console.log(11111)
    },
    methods: {
      init (obj) {
        this.chargingRuleObj = obj
        console.log(this.chargingRuleObj)
        this.visible = true
      },
      close () {
        this.visible = false
      }
    }
  }
</script>

<style scoped>

</style>
